<!-- 搜索页 -->
<template>
  <div>
    <!-- 搜索框 -->
    <van-search
      v-model="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <!--  下拉菜单 全部-价格-分类 -->
    <DropDown
      v-if="goodList.length != 0"
      :goodList="goodList"
      :filterCategory="filterCategory"
      @changePrice="changePrice"
      @changeCategory="changeCategory"
    ></DropDown>
  </div>
</template>

<script>
//引入 下拉菜单 全部-价格-分类
import DropDown from "@/components/DropDown";
// 请求数据
import { getGoodList } from "@/utils/https";
export default {
  data() {
    return {
      keyword: "",
      page: 1,
      size: 20,
      order: "desc", //降序
      categoryId: 0, // 类别id 全部、居家、餐厨。。。
      sort: "id", // id或 price
      goodList: [], //商品列表数组
      filterCategory: [], // 分类选项集合
    };
  },
  components: {
    DropDown,
  },
  created() {
    // 初始化默认渲染调用
    this.getDataList();
  },
  methods: {
    onSearch() {
      console.log(this.keyword);
      // 搜索调用getDataList
      this.getDataList();
    },
    onCancel() {
      this.$router.push("/home");
    },
    getDataList() {
      //获取商品数据列表 封装函数
      let paramsObj = {
        keyword: this.keyword,
        page: this.page,
        size: this.size,
        order: this.order, //降序
        categoryId: this.categoryId, // 类别id 全部、居家、餐厨。。。
        sort: this.sort, // id或 price
      };
      getGoodList(paramsObj).then((res) => {
        this.goodList = res.data.data.goodsList; // 商品列表
        // console.log(this.goodList);
        this.filterCategory = res.data.data.filterCategory; // 分类选项集合
        this.filterCategory = JSON.stringify(this.filterCategory)
          .replace(/name/g, "text")
          .replace(/id/g, "value");
        this.filterCategory = JSON.parse(this.filterCategory);
      });
    },
    changePrice(m) {
      // 点击价格排序执行的函数
      this.order = m; // 升降序  desc  asc
      // console.log(this.order);
      this.sort = "price"; // 根据价格排序
      this.getDataList();
    },
    changeCategory(n) {
      //点击分类进行查询
      // console.log(n);
      this.sort = "id";
      this.categoryId = n;
      this.getDataList();
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>